<template>
    <div class="method">
        <div class="title-box">
            <h2>Method</h2>
            <div class="time-box">
                <div v-if="prepTime" class="time-item">
                    <time>{{ prepTime }}</time>
                    <span>PREP TIME</span>
                </div>
                <div v-if="totalTime" class="time-item">
                    <time>{{ totalTime }}</time>
                    <span>TOTAL TIME</span>
                </div>
                <div v-if="serves" class="time-item">
                    <time>{{ serves }}</time>
                    <span>SERVES</span>
                </div>
            </div>
        </div>
        <ul class="steps-list">
            <li v-for="step in steps" :key="step.number" class="step">
                <span class="step-title">Step {{ step.number }}</span>
                <p class="step-description">{{ step.description }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { Step } from '@/data/foodData'

defineProps<{
    steps: Step[];
    prepTime: string;
    totalTime: string;
    serves: string;
}>()
</script>

<style scoped lang="scss">
.method {

    // 方法的标题和时间
    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;

        h2 {
            font-weight: normal;
        }
    }

    .time-box {
        display: flex;
        align-items: center;
        gap: 15px;
        /* 时间项之间的间距 */
    }

    .time-item {
        text-align: center;

        time {
            font-size: 14px;
            color: #000000;
        }

        span {
            font-size: 11px;
            display: block;
            font-weight: bold;
            margin-top: 5px;
            padding-top: 5px;
            border-top: 2px solid #000000;
        }
    }

    .step {
        margin-bottom: 30px;

        .step-title {
            font-weight: bold;
            display: block;
            font-size: 12px;
            margin: 0 0 5px;
        }

        .step-description {
            margin: 0;
            color: #66686e;
            font-size: 12px;
        }
    }

    .steps-list {
        list-style-type: none;
        padding: 10px;
        text-align: left;
    }
}
</style>
